<template>
    <!--对垒悬浮框-->
    <div class="stand-facing positionAbCenter">
        <!--<div class="stand-facing-content positionRCT">-->
        <div class="stand-facing-content">
            <div class="">
                怎么看待女生穿超短裙？
            </div>
            <div v-if="standFaceMsg.templateType==0 ">
                <div class="stand-btns" v-if="!standFaceMsg.isChoise">
                    <img class="stand-btn" v-if="true" :src="staticImageUrl('/images/components/light_blue_btn.png')" alt="">
                    <span class="agree feed-back-btn">是的</span><span class="disagree feed-back-btn">不是</span>
                </div>
                <div v-else-if="standFaceMsg.isChoise" class="stand-facing-button positionRLCT" :class="{'border-radius5':true}">3.3W人</div>
            </div>
            <div v-else-if="standFaceMsg.templateType==1">
                <div class="stand-btns" v-if="!standFaceMsg.isChoise">
                    <img class="stand-btn" :src="staticImageUrl('/images/components/deep_blue_btn.png')" alt="">
                    <span>是的</span><span>不是</span>
                </div>
                <div v-else-if="standFaceMsg.isChoise" class="stand-facing-button positionRLCT" :class="{'border-radius5':true}">3.3W人</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "StandFacing",
        props:{
            interactProp:Object
        },
        data(){
            return{
                isSelf:true,/*@isSelf是否为自己发起的话题*/
                standFaceMsg:{
                    isChoise:false,//是否已经参与
                    templateType:0,//对垒魔板
                }
            }
        },
        mounted() {
            this.standFaceMsg = Object.assign({},this.standFaceMsg,this.interactProp)
        },
        methods:{
            touchMove(){

            }
        },
        watch:{
            interactProp(val){
                this.standFaceMsg = Object.assign({},this.standFaceMsg,val)
            }
        },
    }
</script>

<style scoped>
    .stand-facing{
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
    }
    .stand-facing-content{
        padding: .15rem .16rem .1rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 2.4rem;
        text-align: center;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        background-color: rgba(0,0,0,.1);
        color: #fff;
        font-size: .18rem;
    }
    .stand-facing-button{
        width: 1.2rem;
        height: .4rem;
        line-height: .4rem;
        background-color: rgba(255,255,255,.4);
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        margin-top: .1rem;
    }
    .border-radius5{
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
    }
    .stand-btns{

    }
</style>